<style>
    .custom-toolbar{padding: 0em 1em 1em 0em;}
    .modal-lg {
        width: 918px;
    }
    .form-inline i{margin-right: 19px !important;}
</style>
<div class="row-fluid clearfix">
    <div class="col-md-12 column">
        <ul class="breadcrumb">
            <li>
                <a href="index.html">首页</a>
            </li>
            <li class="active">
                客户信息管理
            </li>
        </ul>
    </div>
    <div class="col-md-12 column">
        <div class="col-sm-12 div-page">
            <div class="col-sm-12 div-table">
                <div id="custom-toolbar" class="col-sm-12 custom-toolbar">
                    <button id="btn-Filter" type="button" href="#modal-Filter" role="button" data-toggle="modal" class="btn btn-sm btn-primary pull-right" title="请选择数据">
                        <span class="glyphicon glyphicon-th-list"></span> 查询
                    </button>
                </div>
                <table id="table" class="table table-hover table-condensed"
                       data-click-to-select="true"  data-single-select="true" data-height="200">
                    <thead>
                    <tr>
                        <th data-field="state" data-checkbox="true" ></th>
                        <th data-field="UseName" data-halign="center" data-align="center" data-width="100">用户名称</th>
                        <th data-field="CardNo" data-halign="center" data-align="center" data-width="200">绑定卡号</th>
                        <th data-field="CertifiType" data-halign="center" data-align="center" data-width="100">证件类型</th>
                        <th data-field="CertifiNo" data-halign="center" data-align="center" data-width="180">证件号码</th>

                        <th data-field="BindPhone" data-halign="center" data-align="center" data-width="150">绑定电话</th>
                        <th data-field="DeviceId" data-halign="center" data-align="center" data-width="200">设备号</th>
                        <th data-field="SafeDevId" data-halign="center" data-align="center" data-width="200">密码键盘号</th>
                        <th data-field="ChargeState" data-halign="center" data-align="center" data-formatter="ChargeStateFormatter" data-width="100">扣费状态</th>
                        <th data-field="UsrState" data-halign="center" data-align="center" data-formatter="UsrStateFormatter" data-width="100">扣费状态</th>
                        <!--<th data-field="FreeState" data-halign="center" data-align="center" data-formatter="FreeStateFormatter" data-width="100">收费状态</th>-->

                        <th data-field="OrgId" data-halign="center" data-align="center" data-width="100">机构号</th>
                        <th data-field="ABISCode" data-halign="center" data-align="center" data-width="100">行号</th>
                        <th data-field="OrgIdName" data-halign="center" data-align="center" data-width="400" data-width="100">机构名称</th>
                    </tr>
                    </thead>
                </table>
            </div>
            <div class="col-sm-12">
                <form id="queryForm1" method="post" class="form-horizontal layer_msg">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">目标所属机构</label>
                            <div class="col-sm-8">
                                <input type="hidden" class="form-control" name="orgidMuBiao" id="orgidMuBiao" value=""/>
                                <input type="hidden" class="form-control" id="orgnameMuBiao" value=""/>
                                <div class="col-sm-4" style="padding-left: 0;padding-right: 2px">
                                    <select class="form-control" id="level11">
                                    </select>
                                </div>
                                <div class="col-sm-4" style="padding-left: 0;padding-right: 2px;display: none">
                                    <select class="form-control" id="level21">
                                    </select>
                                </div>
                                <div class="col-sm-4" style="padding-left: 0;padding-right: 0;display: none">
                                    <select class="form-control" id="level31">
                                    </select>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer" style="background-color: white">
                        <button id="change" type="button" class="btn btn-primary">修改</button>
                    </div>
                </form>
            </div>

        </div>
        <div class="col-sm-12 alert alert-success div-alert" id="events-result" data-es="Aquí se muestra el resultado del evento"></div>
        <!-- #筛选条件遮罩层 --->
        <div class="modal fade" id="modal-Filter" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <div class="modal-title" id="myModalLabel1">
                            查询条件
                        </div>
                    </div>
                    <form id="queryForm" method="post" class="form-horizontal layer_msg">
                        <div class="modal-body">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">绑定电话</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="PhoneNo" id="PhoneNo" placeholder="固话格式：区号-直播号"/>
                                    <input type="hidden" class="form-control" name="OrgId" id="OrgId"/>
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button id="modal-btn-query" type="submit" class="btn btn-primary" data-dismiss="modal">查询</button> <button id="modal-btn-close1" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(function () {
    /*BootstrapTable初始化-Start*/
    $('#table').bootstrapTable({
        data:[],
        pageSize:10,
        search:false,
        responseHandler:function(data){
            var arr=[];
            arr.push(data.data);
            return arr;
        }
    })
        .on('click-row.bs.table', function (e, row, $element) {
            if ( $element.hasClass('selected') ) {
                $element.removeClass('info');
            }
            else {
                $element.parent('tbody').find(' > tr.selected ').removeClass("info");
                $element.addClass('info');
            }
        })
        .on('check.bs.table', function (e, row, $element) {
            $(".btn-Data").removeClass("disabled");
        })
        .on('uncheck.bs.table', function (e, row, $element) {
            $(".btn-Data").addClass("disabled");
        });
    /*BootstrapTable初始化-End*/

    /*筛选框数据初始化-Start*/
    $('#modal-Filter').modal('show');
    /*筛选框数据初始化-End*/

    /*筛选框查询按钮点击事件注册-Start*/
    $("#modal-btn-query").click(function(e){
        var phone=$.trim($("#PhoneNo").val()),reg;
        reg=/0\d{2,3}-\d{5,9}|0\d{2,3}-\d{5,9}/g.test(phone);
        if(!reg)
        {
            alert("固话号码格式错误！");
            return false;
        }
        $('#table').bootstrapTable('refresh',{url:globalUrl+"api/WhiteList?"+$("#queryForm").serialize()});
    });
    /*筛选框查询按钮点击事件注册-End*/
    OrgSelect("请选择",$("#OrgId"),$("#level1"),$("#level2"),$("#level3"));
    OrgSelect("请选择",$("#orgidMuBiao"),$("#level11"),$("#level21"),$("#level31"));

    $("#change").click(function(){
        if($('#table').bootstrapTable('getSelections').length<1)
        {
            alert("请选中一行！");
            return;
        }
        if($("#orgidMuBiao").val()=="")
        {
            alert("请选择目标机构！");
            return;
        }
        var rowData=$('#table').bootstrapTable('getSelections')[0];
        $.ajax({
            type: "get",
            async:false,
            datatype:"json",
            data:{
                option:1,
                UsrNo:rowData.UsrNo,
                OldOrgId:rowData.OrgId,
                NewOrgId:$("#orgidMuBiao").val(),
                ABISCode:$("#orgnameMuBiao").val().substr(0,4)
            },
            url: globalUrl+"api/WhiteList",
            success: function (resp) {
                if(resp.result)
                {
                    $('#table').bootstrapTable('refresh',{url:globalUrl+"api/WhiteList?"+$("#queryForm").serialize()});
                    alert(resp.msg);

                }
                else
                {
                    alert(resp.msg);
                }
            },
            error:function(){
                alert("后台未成功返回！");
            }
        });
    });
    });

function UsrStateFormatter(value, row) {
    var v="未知";
    if(value==0)
    {
        v="停用";
    }
    if(value==1)
    {
        v="正常";
    }
    return v;
}
function ChargeStateFormatter(value, row) {
    var v="未知";
    if(value==0)
    {
        v="欠费";
    }
    if(value==1)
    {
        v="正常";
    }
    return v;
}
function FreeStateFormatter(value, row) {
    var v="未知";
    if(value==0)
    {
        v="收费";
    }
    if(value==1)
    {
        v="免费";
    }
    return v;
}
function getNums(lines){
    var str="";
    for( var i=0;i<lines.length;i++)
    {
        str+=lines[i].PhoneNo+","
    }
    console.log(str.substr(0,str.length-1));
    return str.substr(0,str.length-1);
}
function OrgSelect(text,$obj,$sel1,$sel2,$sel3){
    switch ($.cookie("OperClass")){
        case "1":
            FormatSelectHasABIS(globalUrl+"api/Site?orgid=910",$sel1,text,"",function(resp){});
            break;
        case "2":
            $sel1.parent().addClass("hidden");
            $sel2.empty().parent().css("display","block");
            FormatSelectHasABIS(globalUrl+"api/Site?orgid="+ $.cookie("OrgId"),$sel2,text,"",function(resp){});
            break;
        case "3":
            $sel1.parent().addClass("hidden");
            $sel3.empty().parent().css("display","block");
            FormatSelectHasABIS(globalUrl+"api/Site?orgid="+ $.cookie("OrgId"),$sel3,text,"",function(resp){});
            break;
        case "4":
            $sel1.parent().addClass("hidden");
            $sel2.parent().addClass("hidden");
            $sel3.parent().addClass("hidden");
            $("#OrgId").val($.cookie("OrgId")).attr("readonly",true).parent().parent().css("display","none");
            $(".custom-selected").addClass("hidden");
            break;
    }
    $sel1.change(function(){
        $sel2.empty().parent().css("display","none");
        $sel3.empty().parent().css("display","none");
        $obj.val($(this).val());
        $obj.next().val($(this).find("option:selected").text());
        if($(this).val()!=""){
            FormatSelectHasABIS(globalUrl+"api/Site?orgid="+$(this).val(),$sel2,text,"",function(resp){
                if($sel2.find("option").length>0)
                {
                    $sel2.parent().css("display","block");
                }
            });
        }
        else
        {
            $obj.val("910");
        }


    });
    $sel2.change(function(){
        $obj.val($(this).val());
        $obj.next().val($(this).find("option:selected").text());
        $sel3.empty().parent().css("display","none");
        if($(this).val()!=""){
            var orgid=$(this).val();
            var orgtext=$(this).find("option:checked").text();
            FormatSelectHasABIS(globalUrl+"api/Site?orgid="+$(this).val(),$sel3,text,"",function(resp){
                level31=resp;
                if($sel3.find("option").length>0)
                {
                    $sel3.parent().css("display","block");
                }
            });
        }


    });
    $sel3.change(function(){
        if($(this).val()!=""){
            $obj.val($(this).val());
            $obj.next().val($(this).find("option:selected").text());
        }

    });
}
</script>